<!-- 事业部经营 -->
<template>
    <div class='p-divisionalHome app-container'>
        <ul class="message-content clearfix">
            <li class="messageli" v-for="(item,i) in informationList" :key="i">
                <div class="top clearfix">
                    <img :src="item.img" alt="">
                    <span class="name">{{item.name}}</span>
                    <span class="status" v-if="i == '4'">状态<el-tag type="success">健康</el-tag></span>
                    <span class="mess"></span>
                </div>
                <div v-if="i != '4'" class="bottom">{{item.money}}</div>
                <div v-else class="totle">
                    <span>统计项目总数<i>{{item.totle}}</i></span>
                    <span>现金流量比<i>{{item.ratio}}%</i></span>
                </div>
            </li>
        </ul>
        <!-- <divisionalHome-table></divisionalHome-table> -->
        <div class="list-wrapper" style="flex: 1;">
            <div class="content">
                <top-table></top-table>
                <div class="echart-content">
                    <ul class="echartContent clearfix">
                        <li id="income"></li>
                        <li>
                            <div class="cutMonth clearfix">
                                <img @click="preClick(5)" class="left" src="../../../assets/left.png" />
                                <img @click="nextClick(5)" class="right" src="../../../assets/right.png" />
                            </div>
                            <div id="earnings"></div>
                        </li>
                    </ul>
                </div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="title">
                            <span>售前项目分析</span>
                        </div>
                        <ul class="projectDetails">
                            <li class="clearfix">
                                <div>
                                    <p>项目应付款总额</p>
                                    <p>926,55660</p>
                                    <p>项目已付款总额</p>
                                    <p>726,5660</p>
                                </div>
                                <i class="mess"></i>
                            </li>
                            <li class="clearfix">
                                <div>
                                    <p>在手项目订单总额</p>
                                    <p>166,560</p>
                                </div>
                                <i class="mess"></i>
                            </li>
                        </ul>
                    </el-col>
                    <el-col :span="12">
                        <div class="title">
                            <span>在手项目分析</span>
                        </div>
                        <ul class="projectDetails">
                            <li class="clearfix">
                                <div>
                                    <p>线索转机会转化率</p>
                                    <p>48%</p>
                                    <p>机会转成交成单率</p>
                                    <p>18%</p>
                                </div>
                                <i class="mess"></i>
                            </li>
                            <li class="clearfix">
                                <div>
                                    <p>节点提前项目数量</p>
                                    <p>48</p>
                                    <p>节点滞后项目数量</p>
                                    <p>18</p>
                                </div>
                                <i class="mess"></i>
                            </li>
                        </ul>
                    </el-col>
                </el-row>
                <div class="echart-content">
                    <ul class="echartContent clearfix">
                        <li id="cost"></li>
                        <li id="itCosts"></li>
                    </ul>
                </div>
                <div class="echart-content">
                    <ul class="echartContent clearfix">
                        <li id="successRate"></li>
                        <li>
                            <div class="celectContent">
                                请选择项目编号
                                <el-select v-model="currentValue" placeholder="请选择" size="mini">
                                    <el-option v-for="item in groupingList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </div>
                            <div id="deviation"></div>
                        </li>
                    </ul>
                </div>
                <center-table></center-table>
                <bottom-table></bottom-table>
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import divisionalHomeTable from '../modules/divisionalHome-table'
    import TopTable from '../modules/topTable'
    import CenterTable from '../modules/centerTable'
    import BottomTable from '../modules/bottomTable'
    export default {
        components: {divisionalHomeTable,TopTable,CenterTable,BottomTable },
        data() {
            return {
                informationList:[
                    {id:'1',img:require('../../../assets/year.png'),name:'2020年度订单总额',money:'92655660'},
                    {id:'2',img:require('../../../assets/afreceivable.png'),name:'2020年度确认收入总额',money:'92655660'},
                    {id:'3',img:require('../../../assets/profit.png'),name:'2020年度项目利润总额',money:'92655660'},
                    {id:'4',img:require('../../../assets/receivable.png'),name:'项目应收款总额',money:'92655660'},
                    {id:'5',img:require('../../../assets/cashflow.png'),name:'本月现金流',money:'92655660',totle:'20',ratio:'17.1'},
                    {id:'6',img:require('../../../assets/handle.png'),name:'项目应付款总额',money:'92655660'},
                    {id:'7',img:require('../../../assets/paid.png'),name:'项目已付款总额',money:'92655660'}
                ],
                currentValue:'',
                groupingList:[],   //图标下拉
            }
        },
        mounted() {
            this.initIncomeChart(); //收入情况
            this.initEarningsChart(); //收益
            this.initCostChart(); //成本情况
            this.initItCostsChart(); //在手成本情况
            this.initSuccessRateChart(); //成功率
            this.initDeviationChart(); //计划与实际的偏差
        },
        methods: {
            //收入情况
            initIncomeChart() {
                this.incomeChart = echarts.init(document.getElementById('income'))
                this.incomeChart.setOption({
                    legend: {
                        icon:'roundRect',
                        data: ['收入总额(万元)', '利润总额(万元)','订单总额(万元)']
                    },
                    grid: {left:'3%',right:'4%',bottom:'1.6%',containLabel: true},
                    xAxis: {type:'category',axisTick: { show: false },splitLine: {show: true},axisLabel:{textStyle:{color:'#333',fontSize:10,}},
                        data: ['2010', '2011', '2012', '2013', '2014', '2015', '2016','2017','2018','2019','2020'],
                    },
                    yAxis: {type: 'value',axisTick: { show: false },axisLabel:{textStyle:{color:'#333',fontSize:10,}},max:9000,min:0,splitNumber:10},
                    series: [
                        {
                            name:'订单总额(万元)',type: 'line',symbol: 'none',smooth: true,itemStyle: {color:'#4680FF'},
                            data: [220, 4932, 391, 6334, 220, 4330, 330,5233,233,4098,623],
                        },
                        {
                            name:'利润总额(万元)',type: 'line',symbol: 'none',smooth: true,itemStyle: {color:'#FF6384'},
                            data: [620, 7932, 391, 4334, 520, 7330, 330,6233,633,7098,323],
                        },
                        {
                            name:'收入总额(万元)',type: 'line',symbol: 'none',smooth: true,itemStyle: {color:'#45B7CD'},
                            data: [420, 5932, 291, 7334, 120, 5330, 130,3233,133,5098,123],
                        }
                    ]
                })
            },
            //收益
            initEarningsChart() {
                this.earningsChart = echarts.init(document.getElementById('earnings'))
                this.earningsChart.setOption({
                    legend: {
                        left:'40%',
                        data: [
                            {name: '已收款',icon: 'roundRect',},
                            {name: '已付款',icon: 'roundRect',},
                            {name: '应收款',icon: 'roundRect',},
                            {name: '应付款',icon: 'roundRect',},
                        ],
                    },
                    grid: {left:'3%',right:'4%',bottom:'1.6%',containLabel: true},
                    xAxis: [
                        {type: 'category',axisTick: {show: false},
                            data: ['1月','2月','3月','4月','5月','6月']}
                    ],
                    yAxis: [{max: 5000,splitNumber:10,type: 'value'}],
                    series: [
                        {
                            name: '已收款',
                            type: 'bar',
                            barGap: 0,
                            barCategoryGap: '85%',
                            itemStyle:{color:'#4680FF'},
                            data: [1320, 2332, 3301, 4334, 3390, 4000]
                        },
                        {
                            name: '已付款',
                            type: 'bar',
                            barCategoryGap: '85%',
                            itemStyle:{color:'#FF6384'},
                            data: [1220, 2182, 3191, 4234, 3290,3900]
                        },
                        {
                            name: '应收款',
                            type: 'pictorialBar',
                            barMaxWidth:1,
                            symbolRepeat: true,
                            symbol: 'rect',
                            symbolOffset: [20, 0] ,
                            symbolSize: [7, 12],
                            barCategoryGap: '85%',
                            itemStyle:{color:'#4680FF'},
                            data: [1150, 2232, 3201, 4154, 3190,2900]
                        },
                        {
                            name: '应付款',
                            type: 'pictorialBar',
                            barMaxWidth:2,
                            symbolRepeat: true,
                            symbol: 'rect',
                            symbolOffset: [26, 0] ,
                            symbolSize: [7,12],
                            barCategoryGap: '85%',
                            itemStyle:{color:'#FF6384'},
                            data: [1198, 2277, 3301, 4499, 3440,1098]
                        },
                        {
                            type: 'line',
                            smooth: true,
                            symbol:'circle',
                            symbolSize: 10,
                            itemStyle: {
                                barBorderRadius: 5,
                                normal: {borderWidth:2,borderColor:'#fff',color: "#F18300",lineStyle: {width: 3,color: "#F18300"}}
                            },
                            lineStyle: {
                                width: 10
                            },
                            data: [220, 3082, 491, 4034, 190, 3030, 110]
                        },
                    ]
                })
            },
            //成本情况
            initCostChart() {
                this.costChart = echarts.init(document.getElementById('cost'))
                this.costChart.setOption({
                    legend: {data:['售前项目成本总额','本年度售前项目成本总额']},
                    grid: {left:'3%',right:'4%',bottom:'1.6%',containLabel: true},
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: { show: false },
                            axisLabel:{textStyle:{color:'#333',fontSize:10,}},
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {axisTick:{show:false},axisLine:{show:false},type:'value',max:2000,splitNumber:10,axisLabel:{textStyle:{color:'#333',fontSize:10,}}}
                    ],
                    series: [
                        {
                            name: '售前项目成本总额',
                            type: 'bar',
                            itemStyle: {
                                color:'#F18300'
                            },
                            barCategoryGap: '75%',
                            data: [260, 590, 900, 264, 287, 707, 1756, 1822, 487, 188, 60, 23],
                        },
                        {
                            name: '本年度售前项目成本总额',
                            type: 'bar',
                            itemStyle: {
                                color:'#4680FF'
                            },
                            data: [200, 490, 700, 232, 256, 767, 1356, 1622, 326, 200, 64, 33],
                        },
                    ]
                })
            },
            //成本情况
            initItCostsChart() {
                this.itCostsChart = echarts.init(document.getElementById('itCosts'))
                this.itCostsChart.setOption({
                    legend: {left: "73%",data:['在手项目成本总额']},
                    grid: {left:'3%',right:'4%',bottom:'1.6%',containLabel: true},
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: { show: false },
                            axisLabel:{textStyle:{color:'#333',fontSize:10,}},
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {axisTick:{show:false},axisLine:{show:false},type:'value',max:2000,splitNumber:10,axisLabel:{textStyle:{color:'#333',fontSize:10,}}}
                    ],
                    series: [
                        {
                            name: '在手项目成本总额',
                            type: 'bar',
                            itemStyle: {
                                color:'#F18300'
                            },
                            barCategoryGap: '75%',
                            data: [260, 590, 900, 264, 287, 707, 1756, 1822, 487, 188, 60, 23],
                        },

                    ]
                })
            },
            //成功率
            initSuccessRateChart() {
                this.successRateChart = echarts.init(document.getElementById('successRate'))
                this.successRateChart.setOption({
                    legend: {icon:'roundRect',data: ['转化率','成单率'],left: '70%'},
                    grid: {left:'3%',right:'4%',containLabel: true},
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: { show: false },
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    },
                    yAxis: {
                        type: 'value',
                        splitNumber:10,
                        max: 5000,
                        min: 0,
                        axisTick: { show: false },
                    },
                    series: [
                        {
                            name:'转化率',
                            type: 'line',
                            smooth: true,
                            symbol:'circle',
                            symbolSize: 10,
                            itemStyle: {
                                normal: {borderColor:'#fff',color: "#4680FF",lineStyle: {color: "#4680FF"}}
                            },
                            areaStyle: {
                                normal: {color: "#cbd9f9",lineStyle: {color: "#4680FF"}}
                            },
                            data: [1220, 3932, 1901, 3934, 1990, 4330, 1520,3934, 1990, 4330, 2320,4000],
                        },
                        {
                            name:'成单率',
                            type: 'line',
                            smooth: true,
                            symbol:'circle',
                            symbolSize: 10,
                            itemStyle: {
                                normal: {borderColor:'#fff',color: "#F18300",lineStyle: {color: "#F18300"}}
                            },
                            areaStyle: {
                                normal: {color: "#f5d4ac",lineStyle: {color: "#F18300"}}
                            },
                            data: [720, 2532, 901, 2934, 290, 2130, 120,2934, 290, 2130, 120,2000],
                        }
                    ]
                })
            },
            //计划与实际的偏差
            initDeviationChart() {
                this.deviationChart = echarts.init(document.getElementById('deviation'))
                this.deviationChart.setOption({
                    legend: {data: ['计划与实际的偏差'],left: '73%'},
                    grid: {left:'3%',right:'4%',bottom:'5%',containLabel: true},
                    xAxis: {
                        data: ['节点1'+"\n"+'2020'+"\n"+'6/15'+"\n"+'2020'+"\n"+'6/16','节点2'+"\n"+'2020'+"\n"+'6/15'+"\n"+'2020'+"\n"+'6/16',
                            '节点3'+"\n"+'2020'+"\n"+'6/15'+"\n"+'2020'+"\n"+'6/16','节点4'+"\n"+'2020'+"\n"+'6/15'+"\n"+'2020'+"\n"+'6/16',
                            '节点5'+"\n"+'2020'+"\n"+'6/15'+"\n"+'2020'+"\n"+'6/16','节点6'+"\n"+'2020'+"\n"+'6/15'+"\n"+'2020'+"\n"+'6/16',
                            '节点7'+"\n"+'2020'+"\n"+'6/15'+"\n"+'2020'+"\n"+'6/16','节点8'+"\n"+'2020'+"\n"+'6/15'+"\n"+'2020'+"\n"+'6/16',
                            '节点9'+"\n"+'2020'+"\n"+'6/15'+"\n"+'2020'+"\n"+'6/16','节点10'+"\n"+'2020'+"\n"+'6/15'+"\n"+'2020'+"\n"+'6/16',
                            '节点11'+"\n"+'2020'+"\n"+'6/15'+"\n"+'2020'+"\n"+'6/16'],
                        splitLine: {show: false},
                        axisTick:{show:false},
                        axisLabel: {textStyle:{color:'#333',fontSize:10,}},
                    },
                    yAxis: {axisTick:{show:false},axisLine:{show:false},
                        max:25,
                        min:-25,
                        splitNumber:10,
                        axisLabel: {textStyle:{color:'#333',fontSize:10,}}
                    },
                    series: [
                        {
                            name: '计划与实际的偏差',
                            type: 'bar',
                            barCategoryGap: '85%',
                            itemStyle:{color:'#F18300'},
                            data: ['15','-15','20','-10','-15','18','12','23','-23','21']
                        },
                    ]
                })
            },
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    .p-divisionalHome {
         .mess {
            float: right;
            display: inline-block;
            width: 25px;
            height: 25px;
            background: url('../../../assets/hint .png') no-repeat center center;
        }
        .message-content {
            padding: 30px 22px 0px;
            li:nth-child(4), li:nth-child(7) {
                margin-right: 0!important;
            }
            li:nth-child(5) {
                width: 585px!important;
                .name {
                    color: #333!important;
                    font-size: 18px!important;
                    height: 26px!important;
                    line-height: 26px!important;
                }
            }
            li:nth-child(5) .top img {
                width: 32px;
                height: 26px;
            }
            .messageli {
                border-radius: 5px;
                padding: 15px;
                box-sizing:border-box;
                margin: 0 21px 21px 0;
                float: left;
                width: 283px;
                height: 100px;
                -webkit-box-shadow: -1px 4px 6px 0px rgba(221,222,223,.9);
                box-shadow: -1px 4px 6px 0px rgba(221,222,223,.9);
                .top {
                    height: 32px;
                    img {
                        float: left;
                        display: inline-block;
                        width: 22px;
                        height: 22px;
                    }
                    .name {
                        float: left;
                        display: inline-block;
                        color: #ccc;
                        font-size: 13px;
                        height: 22px;
                        line-height: 22px;
                        margin-left: 5px;
                    }
                    .status {
                        font-size: 14px;
                        margin-left: 25px;
                        color: #ccc;
                        .el-tag {
                            margin-left: 20px;
                            padding: 0 15px;
                        }
                    }
                }
                .bottom {
                    color: #333;
                    font-size: 22px;
                    font-weight: bold;
                    text-align: center;
                    height: 40px;
                    line-height: 40px;
                }
                .totle span {
                    color: #ccc;
                    display: inline-block;
                    height: 40px;
                    line-height: 40px;
                    width: 49%;
                    font-size: 14px;
                }
                .totle span i {
                    font-size: 22px;
                    color: #333;
                    font-weight: bold;
                }
                .totle span:nth-child(1) {
                    text-align: center;
                }
                .totle span:nth-child(2) {
                    text-align: right;
                }
            }
        }
        .echart-content {
            padding: 16px 21px 0;
            .echartContent li, #deviation, #earnings  {
                position: relative;
                width: 556px;
                height: 400px;
                float: left;
                .cutMonth {
                    z-index: 100;
                    position: absolute;
                    top: 28px;
                    right:20px;
                    .left, .right {
                        float: left;
                        position: relative;
                        display: inline-block;
                        width: 32px;
                        height: 32px;
                        top: -5px;
                        margin-left: 8px;
                    }
                }
            }
            .celectContent {
                z-index: 100;
                color: #394662;
                margin-left: 20px;
                font-size: 14px;
                position: absolute;
            }
        }
        .projectDetails {
            padding: 20px 0 0;
            li:nth-child(1) {
                margin-bottom: 20px;
            }
            li {
                padding: 21px 25px 10px;
                width: 360px;
                height: 160px;
                border: 1px solid #D9DCE0;
                border-radius: 10px;
                margin: 0 auto;
            }
            div {
                float: left;
                display: inline-block;
                width: 85%;
                p:nth-child(odd) {
                    color: #ccc;
                    font-size: 14px;
                }
                p:nth-child(even) {
                    color: #333;
                    font-size: 26px;
                    font-weight: 800;
                    height: 50px;
                    line-height: 50px;
                }
            }
        }
    }
</style>
